<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<ul >
    <!--user in users   ：users 代表的是要遍历的元素数组  user：代表的是元素-->
    <li v-for="user in users">{{user.name}}----{{user.age}}</li>
</ul>
    <br>
<ul>
    <!--(user,index) in users   ：users 代表的是要遍历的元素数组  user：代表的是元素  index代表的是索引（下标）-->
    <li v-for="(user,index) in users">{{index}}----{{user.name}}---{{user.gender}}--{{user.age}}</li>
</ul>
    <br>
<ul >
     <!--user in users   ：users 代表的是要遍历的元素数组  user：代表的是元素-->
     <li v-for="user in users">{{user}}</li>
</ul>
    <br>
<ul>
    <!--value in users  遍历是对象的时候：users 要遍历的对象   value代表的属性值-->
    <li v-for="value in user2">{{value}}</li>
</ul>
    <br>
<ul>
    <!--key in users  遍历是对象的时候：users 要遍历的对象   value代表的属性值  key/name代表键值-->
    <li v-for="(value, key, index) in user2">{{index}}-------{{key}}--------{{value}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",     //  elment 缩写：元素  绑定的是id属性值为app的页面元素 ,对象作用范围是在当前绑定元素下
        data:{          //data属性，是一个数据对象 {}
            name:"hello app2",
            num: 10,
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            user2:{username: 'steel', password: '123456'}
        },


    })
</script>
</html>